<template>
  <div class="add_car">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="车辆名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <!-- 车辆类型 -->
      <el-form-item label="车辆类型">
        <el-select v-model="form.cartype" placeholder="请选择车辆类型">
          <el-option label="SUV" value="SUV"></el-option>
          <el-option label="轿车" value="轿车"></el-option>
        </el-select>
      </el-form-item>
      <!--  -->
      <el-form-item label="车辆特点">
            <el-input v-model="form.feature" placeholder="美观/大气/豪华"></el-input>
      </el-form-item>
      <!-- 座位数 -->
      <el-form-item label="座位数">
        <el-select v-model="form.seat" placeholder="车辆座位数">
          <el-option label="5座" value="5座"></el-option>
          <el-option label="三厢" value="三厢"></el-option>
          <el-option label="7座" value="7座"></el-option>
        </el-select>
      </el-form-item>
      <!-- 车辆动力 -->
       <el-form-item label="车辆动力">
        <el-select v-model="form.power" placeholder="请选择车辆动力">
          <el-option label="1.2T" value="1.2T" ></el-option>
          <el-option label="1.5T" value="1.5T" ></el-option>
          <el-option label="2.0T"  value="2.0T"></el-option>
          <el-option label="3.0T" value="3.0T"></el-option>
          <el-option label="1.6T" value="1.6T"></el-option>
        </el-select>
      </el-form-item>
      <!-- 车辆评分 -->
         <el-form-item label="评分">
        <el-select v-model="form.score" placeholder="请选择车辆评分">
          <el-option label="5分" value="5"></el-option>
          <el-option label="4分" value="4"></el-option>
          <el-option label="3分" value="3"></el-option>
          <el-option label="2分" value="2"></el-option>
          <el-option label="1分" value="1"></el-option>
        </el-select>
      </el-form-item>
      <!-- 车辆价格 -->
            <el-form-item label="车辆价格">
        <el-input v-model="form.price"></el-input>
      </el-form-item>
      <!-- 油箱容量 -->
         <el-form-item label="油箱">
        <el-select v-model="form.tank" placeholder="油箱容量">
          <el-option lang bel="70L" value="70L"></el-option>
          <el-option lang bel="50L" value="50L"></el-option>
          <el-option label="40L" value="40L"></el-option>
        </el-select>
      </el-form-item>
      <!-- 变速箱 -->
      <el-form-item label="变速箱">
        <el-checkbox-group v-model="form.speedbox">
          <el-checkbox label="自动挡" name="type"></el-checkbox>
          <el-checkbox label="手动挡" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- 是否热销 -->
         <el-form-item label="是否热销">
        <el-select v-model="form.ishot" placeholder="请选择车辆是否热销">
          <el-option label="热销" value="1"></el-option>
          <el-option label="正常" value="0"></el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="车辆类型所属" label-width="100px">
        <el-select v-model="form.cartypeid" placeholder="请选择车辆是否热销">
          <el-option label="奥迪" value="1"></el-option>
          <el-option label="奔驰" value="3"></el-option>
        </el-select>
      </el-form-item>
      <!-- 上传图片 -->
      <el-form-item label="上传图片">
    <el-upload
  class="upload-demo"
  ref="upload"
  action="http://localhost:3000/admin/uploadcardata"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :limit="1"
  :data="resdata"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加车辆</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      resdata:{
        data:[]
      },
      form: {
        name: "",
        region: "",
        delivery: false,
        feature: "",
        ishot: [],
        cartype:"",
        power: [],
        seat: [],
        score: [],
        price: "",
        tank: [],
        speedbox:[],
        cartypeid:[]
      },
    };
  },
  methods: {
     submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        // console.log(file, fileList);
      },
      handlePreview(file) {
        // console.log(file);
      },
    onSubmit() {
      let detail = [this.form.name,this.form.cartype,this.form.feature,this.form.power,this.form.seat,this.form.score,this.form.price,this.form.tank,this.form.speedbox,this.form.ishot,this.form.cartypeid]
      this.resdata.data=detail      // console.log(...this.form.name)
      this.$refs.upload.submit();
      // console.log(...this.form.price)
      // console.log(...this.form.seat)
      // console.log(...this.form.power)
      // console.log(...this.form.tank)
      // console.log(...this.form.speedbox)
      // console.log(...this.form.cartype)
      // console.log(...this.form.ishot)
      // console.log(...this.form.feature)
      // console.log(...this.form.score)
      // console.log(detail)
    },
  },
};
</script>

<style lang="scss" scoped>
.add_car {
  width: 700px;
}
</style>
